<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link" :style="props.myStyle">
      <svg-icon name="language" :size="props.size" />
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn" :disabled="currentLanguage === 'zh-cn'"> 简体中文 </el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentLanguage === 'en'"> English </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
  import { inject } from 'vue';
  import { getLocalStorage } from '@/utils/tools';

  const props = withDefaults(
    defineProps<{
      size?: string;
      myStyle?: any;
    }>(),
    {
      size: '14px',
      myStyle: {},
    },
  );

  const setLanguage = inject('setLanguage') as (command: string) => void;

  const currentLanguage = getLocalStorage('locale') || 'zh-cn';

  const handleCommand = (command: string) => {
    setLanguage(command);
  };
</script>
